@import '../common/style/index.less';

@image-viewer: ~'@{prefix}-image-viewer';

@image-viewer-icon-font-size: 48rpx;

@image-viewer-nav-height: var(--td-image-viewer-nav-height, 96rpx);
@image-viewer-nav-bg-color: var(--td-image-viewer-nav-bg-color, @font-gray-3);
@image-viewer-nav-color: var(--td-image-viewer-nav-color, @font-white-1);
@image-viewer-nav-index-font-size: var(--td-image-viewer-nav-index-font-size, @font-size-base);
@image-viewer-close-margin-left: var(--td-image-viewer-close-margin-left, @spacer-1);
@image-viewer-delete-margin-right: var(--td-image-viewer-delete-margin-right, @spacer-1);
@image-viewer-top: var(--td-image-viewer-top, @position-fixed-top);

.@{image-viewer} {
  position: fixed;
  top: @image-viewer-top;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1001;
  transform: translateZ(0);
  overflow: hidden;

  &__mask {
    position: absolute;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

  &__content {
    width: 100vw;
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1005;
  }

  .swiper {
    outline: 0;
  }

  &__image {
    width: 100%;
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .t-image--external {
    width: inherit;
    height: inherit;
    display: block;
  }

  &__nav {
    width: 100%;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: @image-viewer-nav-height; // 操作条高度
    background-color: @image-viewer-nav-bg-color; // 操作条背景色
    left: 0;
    color: @image-viewer-nav-color; // 操作条文本颜色
    z-index: 1005;

    &-close {
      margin-left: @image-viewer-close-margin-left; // 关闭操作按钮左部间距

      &:empty {
        display: none;
      }
    }

    &-delete {
      margin-right: @image-viewer-delete-margin-right; // 删除操作按钮右部间距
      &:empty {
        display: none;
      }
    }

    &-close,
    &-delete {
      font-size: @image-viewer-icon-font-size;
    }

    &-index {
      flex: 1;
      font-size: @image-viewer-nav-index-font-size; // 索引文本大小
      text-align: center;
    }
  }
}
